<template>
  <div>
    <div>
      <div>
        <el-select
          v-model="keywords"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          value-key="id"
          :remote-method="remoteMethod"
          :loading="loading"
          :clearable="true"
          size="mini"
          @change="currentSelect"
          style="width: 500px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item"
            class="one-text"
          >
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.district
              }}</span>
          </el-option>
        </el-select>
      </div>
      <div id="container" class="container"></div>
    </div>
    <div class="info-box">
      <p>详细地址：{{ form.address }}</p>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "7d4393d413b456aa759f1c0f1a7ec247",
};
export default {
  name: "AddressChoose",
  data() {
    return {
      // 地图实例
      map: null,
      // 标记点
      marker: "",
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: "",
      // 位置信息
      form: {
        lng: "",
        lat: "",
        adcode: ""
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: [],
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        // 你申请的Key
        key: "36b8d1f912f1dd3c6d2fa12458179f9c",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          viewMode: "3D", //是否为3D地图模式
          zoom: 9, //初始化地图级别
          center: [106.57439, 29.60661], //初始化地图中心点位置
        });
        //地址逆解析插件
        this.geoCoder = new AMap.Geocoder({
          city: "010", //城市设为北京，默认：“全国”
          radius: 1000, //范围，默认：500
        });
        // 搜索提示插件
        this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
        //点击获取经纬度;
        this.map.on("click", (e) => {
          console.log('e',e)
          // 获取经纬度
          this.form.lng = e.lnglat.lng;
          this.form.lat = e.lnglat.lat;
          // 清除点
          this.removeMarker();
          // 标记点
          this.setMapMarker();
        });
      }).catch((err) => {
          // 错误
          console.log(err);
        });
    },
    // 标记点
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      // 逆解析地址
      this.toGeoCoder();
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.form.lng, this.form.lat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          this.form.address = result.regeocode.formattedAddress;
          console.log('详情01',result)
          this.$emit('chooseData',this.form);
        }
      });
    },
    // 搜索
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.AutoComplete.search(query, (status, result) => {
            this.options = result.tips;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 选中提示
    currentSelect(val) {
      console.log('val',val)
      // 清空时不执行后面代码
      if (!val) {
        return;
      }
      this.form = {
        lng: val.location.lng,
        lat: val.location.lat,
        address: val.district + val.address
      };
      this.$emit('chooseData',this.form);
      // 清除点
      this.removeMarker();
      // 标记点
      this.setMapMarker();
    }
  },
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    this.map.destroy();
    this.map = null;
  }
};
</script>

<style>
.container {
  width: 900px;
  height: 500px;
}
</style>
